<!DOCTYPE html>
<html>
	<head>
		<!--meta元信息,charset字符集，utf-8中文字符-->
		<meta charset="utf-8">
		<title>永和小票</title>
		<!--样式设计写在style标签中,key:value-->
		<style>
			body{/*对整个样式进行设置*/
				width:310px;
				font-size:10px;/*字体大小*/
				}
				/*solid 实线 dashed虚线*/
				hr{border:1px dashed}
				/*对应单独样式进行设置
				class使用.
				id使用#
				*/
				.please{
					font-size:24px;
					font-weight:bold;/*加粗*/
				}
				.self{
					/*padding 修饰4周 上右下左(顺时针一圈4个)*/
					padding-left:80px;/*左边空一定距离*/
				}
				.note{
					/*padding-top:20px;上空*/
					/*padding-bottom:15px;下空*/
					margin-top:20px;
					margin-bottom:15px;
				}
				.img{
					padding-left:70px ;
				}
		</style>
	</head>
	<body>
		<!--div标签会自动换行 span不换行：块-->
		<div >顾客联</div>
		<div class="please">请您留意取餐账单号</div>
		<div class="self">自取顾客联</div>
		<div>永和大王(北三环西路店)</div>
		<div>010-62112313</div>
		<div class="self">--结账单--</div>
		<div class="please">账单号:P000010</div>
		<div>账单类型:堂食</div>
		<div>人数:1</div>
		<div>收银员:张静</div>
		<div>开单时间：2018-04-17 07:24:29</div>
		<div>结账时间:2018-04-17 07:24:38</div>
		<hr/>
		<!--表格是没有列概念,它叫做单元格 
		 页面中换行会被解析一个空格
		 table表
		 align横向排列:left居左、center居中、right居右
		 valign纵向排列:top居上、center居中、bottom居下-->
		<table border="0">
			<tr>
				<td width="50"align="left">数量</td>
				<td width="190">品项</td>
				<td width="50" align="right">金额</td>
			</tr>
			<tr>
				<td valign="top">1</td>
				<td>玉米肉松蛋饼2P<br/>
				    1 X --玉米肉松蛋饼<br/>
				    1 X --现磨豆浆(热/甜)
				</td>
				<td valign="top" align="right">8.00</td>
			</tr>
		</table>
		<hr/>
		<table border="0">
			<tr>
				<td width="246">合计</td>
				<td width="50" align="right">8.00</td>
			</tr>
			<tr>
				<td>微支付</td>
				<td align="right">8.00</td>
			</tr>
		</table>
		<hr/>
		<div>打印时间：2018-04-17 07:24:23</div>
		<hr/>
		<!--&nbsp;代表一个空格,7个空格等价于2个汉字距离-->
		<div class="note">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。此二维码30天有效，扫描时请保持小票平整。</div>
	    
		<!--引入图片,只设置一个,它会等比缩放
		src配置图片来源,相对路径,从自己html文件出发去找
		html所在目录下的images目录,images目录下的qr。png
		只设置宽度,高度会自动算,等比缩放,只设置高度,宽度会自动等比缩放
		即设置高又设置宽，按要求不等比-->
		<img class="img"src="img/xl.png" width="150" height="150">
		<div>官网：www.yonghe.com.cn</div>
		<div>加盟热线：86-21-60769397 或 86-21-60799002</div>
		<br/>
	</body>
</html>
